<extend name="Base/common" />
<block name="body">
    <link href="__CSS__/marketing.css" rel="stylesheet">
    <ul class="breadcrumb search">
        <li><a href="{:U('/')}">首页</a></li>
        <li><a href="{:U('Item/search', array('cid' => $data['cid_1']))}" target="_self">{$data['category']}</a></li>
        <li class="active">{$data['name']}</li>
    </ul>

    <div class="row">
        <!-- 拼团商品信息 -->
        <div class="col-xs-12 padd0">
            <div class="item-hd">
                <div class="row">
                    <!-- 商品图片 -->
                    <div class="col-xs-6">
                        <div class="item-pic" id="J_item_slider">
                            <notempty name="data.images_list">
                                <div class="bd">
                                    <ul>
                                        <volist name="data.images_list" id="vo">
                                            <!--<li><img src="{:get_image_thumb($vo['path'], 600, 600)}" alt=""></li>-->
                                            <li><img src="{$vo['path']}" alt=""></li>
                                        </volist>
                                    </ul>
                                </div>
                                <div class="hd">
                                    <ul>
                                        <volist name="data.images_list" id="vo">
                                            <li><img src="{:get_image_thumb($vo['path'], 80, 80)}" width="62"></li>
                                        </volist>
                                    </ul>
                                </div>
                                <a class="prev" href="javascript:void(0)"><i class="icon icon-arrow-left"></i></a>
                                <a class="next" href="javascript:void(0)"><i class="icon icon-arrow-right"></i></a>
                            </notempty>
                        </div>
                    </div>
                    <!-- 商品名称、属性、规格、价格 -->
                    <div class="col-xs-6">
                        <div class="item-info clearfix">
                            <!-- 名称、简介 -->
                            <h3>{$data.name}</h3>
                            <p class="text-summary">{$data.summary}</p>

                            <!-- 价格、规格、数量 -->
                            <div class="panel">

                                <if condition="C('IS_SHOW_BUYNUM')">
                                    <dl class="dl-horizontal item">
                                        <dt>销量：</dt>
                                        <dd><em class="text-danger">{$data['buynum']}</em> 人已购买</dd>
                                    </dl>
                                </if>

                                <!-- 商品规格 -->
                                <notempty name="data.property.property_specifiction">
                                    <div class="skubox_lists" id="J_skubox_lists">
                                        <p class="tips">请选择您要的商品信息<a href="javascript:;" class="close" id="J_skubox_close"><i class="icon icon-close"></i></a></p>
                                        <volist name="data.property.property_specifiction" id="spc" key="spc_key">
                                            <dl class="dl-horizontal item sku-box J_sku_box">
                                                <dt>{$spc.cname}：</dt>
                                                <notempty name="spc.info">
                                                    <dd>
                                                        <ul class="clearfix spec-lists J_spec_item
                                                            <in name='spc.formtype' value='checkbox'>text</in>
                                                            <in name='spc.formtype' value='color,image'>color</in>">
                                                            <volist name="spc.info" id="val">
                                                                <li title="{$val['option']}" class="choose J_sale_prop" data-key="{$spc_key}" data-code="{$val['code']}" args="key[{$val['code']}]={$spc.cname}&val[{$val['code']}]={$val['option']}&code[{$spc_key}]={$val['code']}">
                                                                    <a href="javascript:;" style="width:42px">
                                                                        <switch name="spc.formtype">
                                                                            <case value="color">
                                                                                <notempty name="val.item_pic">
                                                                                    <img class="cloudzoom-gallery" src="__ROOT__{:get_image_thumb($val['item_pic'], 100, 100)}">
                                                                                    <else />
                                                                                    <notempty name="val.pic">
                                                                                        <img src="__ROOT__{$val.pic|get_cover='path'}" title="{$val['option']}" />
                                                                                        <else />
                                                                                        <i style="display: block;width: 36px;height:36px;background:{$val['color']}"></i>
                                                                                    </notempty>
                                                                                </notempty>
                                                                            </case>
                                                                            <case value="image">
                                                                                <img src="__ROOT__{$val.pic|get_cover='path'}" alt="{$val['option']}" title="{$val['option']}" />
                                                                            </case>
                                                                            <default />{$val['option']}
                                                                        </switch>
                                                                        <span>已选中</span>
                                                                    </a>
                                                                </li>
                                                            </volist>
                                                        </ul>
                                                    </dd>
                                                </notempty>
                                            </dl>
                                        </volist>
                                    </div>
                                </notempty>
                                <input type="hidden" id="J_item_quantity" value="1" min="1">

                                <!-- 商品价格 -->
                                <dl class="dl-horizontal item price">
                                    <dt>价格：</dt>
                                    <dd>
                                        <span class="text-danger text-lg"><em class="yen" style="color:#000;font-size:14px;">&yen;</em><em>{$data.mprice}</em></span>
                                        <label class="single-buy">单独购</label>
                                    </dd>
                                </dl>

                                <input type="hidden" id="J_item_id" name="item_id" value="{$data.id}">
                                <input type="hidden" id="J_item_price" name="price" value="{$data.price}">
                                <input type="hidden" id="J_item_stock" value="{$data.stock}" />
                                <input type="hidden" id="J_item_spec" name="specifiction" value="">
                                <input type="hidden" id="J_item_code" name="item_code" value="{$data.number}">
                            </div>

                            <!-- 购买按钮 -->
                            <div class="buy clearfix">
                                <gt name="data.stock" value="0">
                                    <div class="open-group"><span><label>￥</label><em class="J_spec_price">{$data['price']}</em><a href="javascript:;">{$data['join']['join_num']?:0}人团</a></span><a class="J_join_buy" href="javascript:;">立即开团</a></div>
                                    <else />
                                    <span class="item"><a href="javascript:;" class="btn btn-positive disabled">卖光</a></span>
                                    <span class="item"><a href="{:U('/Item/search')}" class="btn btn-block">其它</a></span>
                                </gt>
                            </div>
                            <!-- 运费 -->
                            <dl class="dl-horizontal item deliver">
                                <dt>运费：</dt>
                                <dd>
                                    由<strong>{$data['store_name']|default='平台'}</strong>发货并提供售后服务
                                    <span class="delivery_free text-danger">
                                        <php>$a_pr = get_store_free_amount($data['store_id']);</php>
                                        <gt name="a_pr" value="0">
                                            （满{$data.store_id|get_store_free_amount}元包邮）
                                            <else />
                                            {$data.id|get_store_item_freight}
                                        </gt>
                                        <notempty name="data.SecondPieces">
                                            （限购2件）
                                        </notempty>
                                    </span>
                                    <!--(仅限以内)-->
                                </dd>
                            </dl>
                            <!-- 社会化分享 -->
                            <div class="share clearfix">
                                <span class="pull-left text-share">分享到：</span>
                                <a href="http://service.weibo.com/share/share.php?url={$meta_share.link}&title={$data.name}&pic=http://shop.shante.me/__IMG__/logo-avatar.png" class="item" title="分享到新浪微博" target="_blank"><i class="icon icon-share-weibo"></i></a>
                                <a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={$meta_share.link}&title={$data.name}&pics=http://shop.shante.me/__IMG__/logo-avatar.png" class="item" title="分享到QQ空间" target="_blank"><i class="icon icon-share-qzone"></i></a>
                                <a href="http://www.jiathis.com/send/?webid=weixin&url={$meta_share.link}&title={$data.name}" class="item" title="分享到微信" target="_blank"><i class="icon icon-share-weixin"></i></a>
                                <div class="fav-add">
                                    <a href="javascript:;" data-id="{$data.id}" id="J_item_{$data.id}" class="J_add_fav">
                                        <eq name="data.is_fav" value="1">
                                            <i class="icon icon-like-fill"></i> 已收藏
                                            <else />
                                            <i class="icon icon-like"></i> 加入收藏
                                        </eq>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--拼团规则-->
        <div class="rule">
            <h1>
                拼团规则
                <a href="{:U('Article/detail',array('id'=>$aid))}">详细规则&nbsp;></a>
            </h1>
            <ul>
                <li>
                    <a href="javascript:;">1</a>
                    <span>选择心仪团购商品</span>
                    <label style="float:none"></label>
                </li>
                <li>
                    <a href="javascript:;">2</a>
                    <span>支付拼团或参团</span>
                    <label style="float:none"></label>
                </li>
                <li>
                    <a href="javascript:;">3</a>
                    <span>邀请好友参团</span>
                    <label style="float:none"></label>
                </li>
                <li>
                    <a href="javascript:;">4</a>
                    <span>团购人数达到拼团成功</span>
                </li>
            </ul>
        </div>
        <!-- 左侧相关商品 -->
        <div class="col-xs-3 padd0">
            <div class="item-relative">
                <div class="page-header">
                    <h4>看过本商品的用户还购买过</h4>
                </div>
                <notempty name="data.relative">
                    <ul>
                        <volist name="data.relative" id="vo">
                            <li>
                                <a href="{:U('Item/detail', array('id' => $vo['id']))}" target="_blank">
                                    <img src="__IMG__/img-pai-bg.png" data-url="{:get_image_thumb($vo['cover_path'], 300, 300)}">
                                </a>
                                <h4 class="name"><a href="{:U('Item/detail', array('id' => $vo['id']))}" target="_blank">{$vo.name}</a></h4>
                                <p class="price">
                                    <span class="text-danger"><em class="yen">&yen;</em>{$vo.price}</span>
                                    <if condition="C('IS_SHOW_BUYNUM')"><span class="pull-right text-info">已有{$vo.buynum}人购买</span></if>
                                </p>
                            </li>
                        </volist>
                    </ul>
                    <else />
                    <p>暂无相关商品！</p>
                </notempty>
            </div>
        </div>

        <!-- 右侧商品详情 -->
        <div class="col-xs-9 padd0">
            <div class="item-intro clearfix">
                <!-- 商品详情tabs -->
                <ul class="nav nav-tabs" id="J_item_navtabs">
                    <li class="active"><a href="#content" data-toggle="tab">商品介绍</a></li>
                    <li><a href="#comment" data-toggle="tab">用户评价<span id="_plnub">({$data['comment_total']})</span></a></li>
                    <!-- <li><a href="#account" data-toggle="tab">Account</a></li> -->
                    <!-- <li class="disabled"><a>Disabled</a></li> -->
                </ul>
                <notempty name="data.property.property_attribute">
                    <!-- 商品参数 -->
                    <div class="property" id="property">
                        <div class="page-header">
                            <h3>商品参数</h3>
                        </div>
                        <div class="row">
                            <volist name="data.property.property_attribute" id="prp">
                                <neq name="prp.info.0" value="">
                                    <div class="col-xs-4">
                                        <span>{$prp.cname}：</span>
                                        <notempty name="prp.info">
                                            <volist name="prp.info" id="val">
                                                <in name="prp.formtype" value="input,textarea">
                                                    {$val}
                                                    <else />
                                                    <eq name="prp.formtype" value="color">
                                                        <notempty name="val.item_pic">
                                                            <img src="{$val.item_pic}" alt="{$val['option']}" title="{$val['option']}" class="item_pic" />
                                                            <else />
                                                            <notempty name="val.pic">
                                                                <img src="__ROOT__{$val.pic|get_cover='path'}" alt="{$val['option']}" title="{$val['option']}" />
                                                                <else />
                                                                <i style="background:{$val['color']}"></i>
                                                            </notempty>
                                                        </notempty>
                                                    </eq>
                                                    <eq name="prp.formtype" value="image">
                                                        <img src="__ROOT__{$val.pic|get_cover='path'}" alt="{$val['option']}" title="{$val['option']}" />
                                                    </eq>
                                                    {$val['option']}&nbsp;
                                                </in>
                                            </volist>
                                        </notempty>
                                    </div>
                                </neq>
                            </volist>
                        </div>
                    </div>
                </notempty>
                <!--参团-->
                <div class="page-header"><h3>团购活动</h3></div>
                <notempty name='joinlist'>
                    <volist name='joinlist' id='vo'>
                        <div class="offer">
                            <img src="{$vo.reg_uid|getAvatar}"/>
                            <span class="offer-head"> 
                            {$vo.reg_uid|get_nickname}
                            <span>{$vo.ship_area|partarr}</span></span>
                            <a style="cursor: pointer;" href="javascript:void(0);" val='{$vo.id}' class="J_join_buy1 psd">直接参团</a>
                            <p class="mytime{$key}" val='{$vo.etime}'>
                                倒计时：
                                <span class='day'>0</span>天
                                <span class='hour'>0</span>小时
                                <span class='minute'>0</span>分钟
                                <span class='second'>0</span>秒
                                <a href="#">差<span><php>  echo $vo['num'] - joincount($vo['id']);</php></span>人成团</a>
                            </p>
                        </div>
                    </volist>
                <else />
                    <h5>暂无开团</h5>
                </notempty>
                    <input type="hidden" id="J_item_id1" >
                    <input type="hidden" id="J_item_price1"">
                    <input type="hidden" id="J_item_joinid1" >
                    <!-- <input type="hidden" id="J_item_stock" value="{$data.stock}" /> -->
                    <input type="hidden" id="J_item_spec1" >
                    <input type="hidden" id="J_item_code1" > 
                    <input type="hidden" id="J_item_quantity1" value="1">
                <!-- 商品详情 -->
                <div class="content" id="content">
                    <div class="page-header">
                        <h3>商品详情</h3>
                    </div>
                    {$data.intro}
                </div>

                <!-- 用户评价 -->
                <div class="comment" id="comment">
                    <div class="page-header">
                        <h3>用户评价</h3>
                    </div>
                    <div class="list">
                        <notempty name="data.comment">
                            <volist name="data.comment" id="vo">
                                <div class="list-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <if condition="$vo['Member']">
                                                <img class="media-object img-circle" src="<notempty name=" $vo.member.avatar">
                                                    {:get_image_thumb($vo['Member']['avatar'], 120, 120)}<else />__IMG__/avatar-default.png
                                                </notempty>" onerror="this.src='__IMG__/avatar-default.png';" width="60">
                                            <else />
                                            <img class="media-object img-circle" src="<notempty name=" $vo.image">{:get_image_thumb(get_cover($vo['image'], 'path'), 120, 120)}<else />__IMG__/avatar-default.png</notempty>" onerror="this.src='__IMG__/avatar-default.png';" width="60">
                                            </if>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading" id="media-heading">
                                                <if condition="$vo['Member']">
                                                    {$vo.Member.nickname|get_hidden_mobile}
                                                    <else />
                                                    {$vo.nickname}
                                                </if>
                                                <small>{$vo.create_time|time_format}</small>
                                            </h4>
                                            {$vo.content}
                                            <notempty name="$vo.reply">
                                                <div class="media">
                                                    <div class="media-left">
                                                        <img class="media-object img-circle" src="__IMG__/logo-avatar.png" width="60" onerror="this.src='__IMG__/thumbnail.png'">
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">{:C('WEB_SITE_TITLE')}回复<small> {$vo.reply.create_time|time_format}</small><a class="anchorjs-link" href="#nested-media-heading"><span class="anchorjs-icon"></span></a></h4>
                                                        {$vo.reply.content}
                                                    </div>
                                                </div>
                                            </notempty>
                                        </div>
                                    </div>
                                </div>
                            </volist>
                        <else />
                            <div class="list-empty">刚刚上架的宝贝，还没有评论信息~</div>
                        </notempty>
                    </div>
                </div>
            </div>
        </div>

    </div>
</block>

<block name="script">
    <script type="text/javascript">

        window.onload = function(){
            $('#J_skubox_lists .J_sku_box').find('ul>li:first').click();
      var zone_out = "{$zone_out}";
      if(zone_out){
        $('.J_join_buy').text('该地区暂时无货');
        }
    }
        //规格组合对应的价格，数量值数组
        var spc_data_info = null;
        <notempty name="data.property.spc_data">
          spc_data_info = '{$data.property.spc_data}';
        </notempty>
        seajs.use(['join'], function(join){
            join.init(spc_data_info);
            $('.item-intro.clearfix .offer').each(function(ele){
                join.showtime(this ,'.mytime'+ele);
            });
        });

    </script>
</block>